<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // Promise的拓展方法    => Promise实例使用
    // 用法 p.then()  p.catch()    p.finally()

    // debugger;
    // 异步操作 => 两秒后 改变Promise实例的状态 



    // 规律:  
    // then() 方法的链式操作 => Promise实例可以依次按顺序调用多个then(), 第一个回调函数完成以后，会将返回结果作为参数(前提:回调函数的返回值是一个非Promise实例)，传入第二个回调函数。
    // then() 方法的链式操作 => Promise实例可以依次按顺序调用多个then(), 第一个回调函数完成以后，如果回调函数的返回值是一个Promise实例,新的实例的状态需要 等待该Promise实例状态改变之后，才会改变,成功 => 传入后续的回调函数  ,失败 => 走catch。 

    // then catch的链式操作 
    // 1.  成功就走then  失败走catch (一失足成千古恨)

    // 2.1. 回调函数的返回值是非Promise实例 直接向后传递  
    // 2.2  回调函数的返回值是Promise实例,等待该Promise实例状态改变之后,继续向后传递


    // T = T1 + T2 + T3;
    // var p1 = getNumAsync(1);   // p1 => 1s后变状态

    // p1.then(function (v) {
    //     console.log("p1已成功", v);
    //     return getNumAsync(2); // p2 => 1s后变状态  回调函数的返回值是一个Promise实例
    // }).then(function (v) {
    //     console.log("p2已成功", v);
    //     return getNumAsync(3);  //p3 => 1s后变状态
    // }).then(function (v) {
    //     console.log("p3已成功", v);
    // }).catch(function (err) {
    //     console.log("已失败", err);
    // })

    //  同时启动多个异步操作 
    //     T1
    // T = T2      => 按最慢的来
    //     T3


    var p1 = getNumAsync(1, true, 2000);
    var p2 = getNumAsync(2, true, 3000);
    var p3 = getNumAsync(3, true, 1000);

    p1.then(function (v) {
        console.log("p1已成功", v);
        return p2; // p2
    }).then(function (v) {
        console.log("p2已成功", v);
        return p3;  //p3 
    }).then(function (v) {
        console.log("p3已成功", v);
    }).catch(function (err) {
        console.log("已失败", err);
    })



    function getNumAsync(val, isFulfilled = true, delay = 1000) {
        var p = new Promise(function (resolve, reject) {
            setTimeout(function () { // 1s后 变为 成功/失败状态 
                isFulfilled ? resolve(val) : reject(val);
            }, delay);
        })
        return p; // Promise <pending>
    }







</script>

</html>